<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可爱的登录界面</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
</head>
<body>
    <div id="app" class="container">
        <img src="./bg.jpg" alt="">
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span :class='{"active":active === "login"}' @click="go('login')">登录</span>
                    <span>/</span>
                    <span :class='{"active":active === "register"}' @click="go('register')">注册</span>
                </div>
                <div class="form" id="fromLogin">
                    <!-- 如果按钮选择的是注册就展示这个里面的内容 -->
                    <template v-if="active === 'register'">
                        <div class="input">
                            <input :class="{hasValue : registerForm.email}" v-model="registerForm.email" type="text" name="email" id="email">
                            <label for="email">邮箱</label>
                        </div>
                        <div class="input">
                            <input :class="{hasValue : registerForm.Username}" v-model="registerForm.Username" type="text" name="Username" id="Username">
                            <label for="email">用户名</label>
                        </div>
                        <div class="input">
                            <input :class="{hasValue : registerForm.Password}" v-model="registerForm.Password" type="text" name="Password" id="Password">
                            <label for="email">密码</label>
                        </div>
                        <div class="input">
                            <input :class="{hasValue : registerForm.repeat}" v-model="registerForm.repeat" type="text" name="Passwordrepeat" id="Passwordrepeat">
                            <label for="email">重复密码</label>
                        </div>
                    </template>
                    <!-- 如果按钮选择的是登录就展示这个里面的内容 -->                
                    <template v-if="active === 'login'">
                        <div class="input">
                            <input :class="{hasValue : loginForm.Username}" v-model="loginForm.Username" type="text" name="Username" id="Username">
                            <label for="email">用户名</label>
                        </div>
                        <div class="input">
                            <input :class="{hasValue : loginForm.Password}" v-model="loginForm.Password" type="text" name="Password" id="Password">
                            <label for="email">密码</label>
                        </div>
                    </template>
                    <span>忘记密码?</span>
                    <button type="submit" @click="submit">登录</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            active :'login',
            registerForm:{
                email : '',
                Username : '',
                Password : '',
                repeat : ''
            },
            loginForm :{
                Username : '',
                Password : ''
            }
        },
        methods: {
            go(type){
                this.active = type;
            },
            submit(){
                if(type === 'login'){
                    console.log('login',this.loginForm)
                }
                if(type === 'register'){
                    console.log('register',this.registerForm)
                }
            }
        }
    })
</script>
</html>